/**
 * Descriptions：
 * <p>
 * Author：ChenME
 * Date：2017/6/28
 * Email：ibelieve1210@163.com
 */

import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    ListView,
    TouchableOpacity,
    Platform,
} from 'react-native';

import Dimensions from 'Dimensions';
var {width} =Dimensions.get('window');

//全局变量
var cols = 5;//共5列
var cellW = Platform.OS === 'ios' ? 72 : 61;
var cellH = Platform.OS === 'ios' ? 72 : 67;
var hMargin = (width - cellW * cols) / (cols + 1);

export default class HomeTopListView extends Component {

    static defaultProps = {
        dataArray: [],
    };

    constructor(props) {
        super(props);
        const ds = new ListView.DataSource({
            rowHasChanged: (row1, row2)=> {
                row1 !== row2;
            }
        });

        this.state = {
            dataSource: ds.cloneWithRows(this.props.dataArray),
        };
    }

    render() {
        return (
            <ListView
                dataSource={this.state.dataSource}
                renderRow={this.renderRow}
                scrollEnabled={false}
                contentContainerStyle={styles.listViewContentStyle}
            />
        );
    }

    renderRow(rowData) {
        return (
            <TouchableOpacity
                activeOpacity={0.7}
                onPress={()=> {
                }}
            >
                <View style={styles.listViewCellStyle}>
                    <Image
                        source={{uri: rowData.image}}
                        style={{width: 52, height: 52}}
                    />
                    <Text style={styles.nameTextStyle}>{rowData.title}</Text>
                </View>
            </TouchableOpacity>
        );
    }
}
const styles = StyleSheet.create({
    listViewContentStyle: {
        width: width,
        flexDirection: 'row',
        //多个cell在同一行显示
        flexWrap: 'wrap',
    },

    listViewCellStyle: {
        alignItems: 'center',
        width: cellW,
        height: cellH,
        justifyContent: 'center',
        marginTop: 7,
        marginLeft: hMargin,
    },

    nameTextStyle: {
        fontSize: Platform.OS === 'ios' ? 14 : 12,
        color: 'gray',
    },
});